import React, { useState } from 'react'

export default function App() {
    const [text, setText] = useState("")
    const [list, setList] = useState(["学习", "睡觉", "bjyx"])
    const handleCanage = (e) => {
        setText(e.target.value)
    }
    const handleAdd = () => {
        // console.log(text);
        setList([...list, text])
        setText("")
        // 清空输入框
    }
    const handleDel=(i)=>{
        let newList=[...list]
        newList.splice(i,1)
        setList(newList)
    }
    return (
        <div>
            <input type="text" onChange={handleCanage} value={text}/>
            <button onClick={handleAdd}>add</button>
            <ul>
                {
                    list.map((item,index) =>
                        <li key={index}>{item}
                            <button onClick={()=>handleDel(index)}>del</button>
                        </li>
                    )
                }
           {!list.length &&  <div>暂无任务</div>}
            </ul>
        </div>
    )
}
